<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位技巧1</title>
    <style>
        .top{
            background-color: #5AA4AE;
            height: 120px;
            width: 100vw;
            font-size: 40px;
            color: #fff;
            font-weight: bold;
            position: fixed;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
<!--viewport视口-->
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet cum cumque est fuga magni optio quia reiciendis soluta ullam voluptates. Aperiam consectetur delectus saepe ullam velit? Dolorem eos excepturi reprehenderit.
</div>
</body>
</html>